<!-- 预约有礼 -->
<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<view class="content" :style="activityJson?.content?.style">
			<view class="title" :style="activityJson?.content?.title?.style">{{ activityJson?.content?.title?.text || '预 约 内 容' }}</view>
			<!-- 表单 -->
			<view class="form">
				<view class="drop-down">
					<view class="selected" @click="openCondition">
						<view>{{ vdata.conditioned?.awardAliasName || '请选择预约项' }}</view>
						<uni-icons type="down" color="#999999"></uni-icons>
					</view>
					<view class="options" :style="dropDownStyle">
						<view v-for="(item,index) in vdata.awardList" :key="index" class="option" :class="{ 'select' : vdata.conditioned?.awardId === item.awardId }" @click="selectCondition(item)">{{ item.awardAliasName }}</view>
					</view>
				</view>
				<view class="input-field">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d9b417d0-a656-40b4-9299-94e076b318e3.png"></image>
					<text>姓名</text>
					<input v-model="vdata.saveObject.name" type="text" maxlength="5" placeholder="输入真实姓名"/>
				</view>
				<view class="input-field">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/dcb83515-3563-43f9-9ad7-9de72d5ac449.png"></image>
					<text>电话</text>
					<input v-model="vdata.saveObject.phone" type="tel" maxlength="11" placeholder="输入手机号"/>
					<button :disabled="smsOptions.disabled" :style="{ background: smsOptions.background }" plain @click="sendSmsCodeFunc">{{ smsOptions.text }}</button>
				</view>
				<view class="input-field">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/4146259e-47a3-41d0-b035-837441a0dc99.png"></image>
					<text>验证码</text>
					<input v-model="vdata.saveObject.code" type="number" maxlength="6" placeholder="输入验证码"/>
				</view>
				<view v-if="vdata.conditioned?.remark === 'B'" class="input-field">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/69a60a4c-cc0b-40b5-8e82-92699d83fa4c.png"></image>
					<text>卡号</text>
					<input v-model="vdata.saveObject.authBankCard" type="number" placeholder="输入卡号"/>
				</view>
				<!-- <view class="input-field">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/512378d6-9859-49c3-b7de-cf4ae50a8f38.png"></image>
					<text>地址</text>
					<picker mode="region" level="sub-district" @change="bindRegionChange" :value="vdata.region">
						<view class="picker">
							{{ vdata.region?.length < 3 ? '请选择地址' : `${vdata.region[0]}/${vdata.region[1]}/${vdata.region[2]}/${vdata.region[3] || '暂未选择'}` }}
						</view>
					</picker>
				</view> -->
				<!-- <view class="input-field">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/512378d6-9859-49c3-b7de-cf4ae50a8f38.png"></image>
					<text>地址</text>
					<picker mode="multiSelector" :range="vdata.range" range-key="text" :value="vdata.rangeIndex" @columnchange="columnchange" @change="changeHandle">
						{{ vdata.rangeValue?.length < 4 ? '请选择地址' : `${vdata.rangeValue[0]}/${vdata.rangeValue[1]}/${vdata.rangeValue[2]}/${vdata.rangeValue[3] || '暂未选择'}` }}
					</picker>
				</view> -->
			</view>
			
			<button class="submit-btn" :style="activityJson?.btn?.style" @click="onSubmit" plain>确认预约</button>
			
			<view class="rules" :style="activityJson?.rule?.style">
				<text class="title" :style="activityJson?.rule?.title?.style">{{ activityJson?.rule?.title?.text || '玩 法 介 绍' }}</text>
				<text>{{ vdata.activityDetail.remark?.replace(/\\n/g, "\n") }}</text>
				<!-- <view v-for="item in vdata.activityDetail.remark">{{ item }}</view> -->
			</view>
		</view>
	</view>
	<!-- 新老客选择弹窗 -->
	<uni-popup ref="selectPopupRef" type="center" :is-mask-click="false">
		<view class="select-popup-container">
			<uni-icons @click="() => { selectPopupRef.close() }" type="closeempty" size="28" color="#9f9f9f" style="position: absolute;top: 24rpx;right: 24rpx;"></uni-icons>
			<view class="select-title">请选择您的客户类型</view>
			<view class="block" :class="{ selected: vdata.selected === 'A' }" @click="selectHandle('A')">
				<view class="left">
					<view>我是新客</view>
					<view>未办理过长春邮政邮政储蓄卡</view>
				</view>
				<view class="right"></view>
			</view>
			<view class="block" :class="{ selected: vdata.selected === 'B' }" @click="selectHandle('B')">
				<view class="left">
					<view>我是老客</view>
					<view>持有长春金融邮政储蓄卡</view>
				</view>
				<view class="right"></view>
			</view>
			<button plain @click="onSubmitSelect">确认选择</button>
		</view>
	</uni-popup>
		
	<!-- 预约成功后的弹窗 -->
	<uni-popup ref="popupRef" type="top" :is-mask-click="false" catchtouchmove="true">
		<view class="popup-container">
			<!-- <image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3428ecf3-16d9-4491-b4e8-0dd3a7c3bb83.png" mode=""></image>
			<image @click="toUrl('/pageUser/myCoupon/index?couponState=0&tabCurrent=1')" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1e551e5e-9523-41b2-ae13-0faa0bfd07c5.png" mode=""></image> -->
			<view class="popup-content">
				<view class="award-name">猪肉一分购物券</view>
				<view class="award-coupon">
					<view class="left">
						<text>￥</text>
						<text>0.01</text>
					</view>
					<view class="right">
						<text>优惠券</text>
						<text>猪肉一分购</text>
					</view>
				</view>
				<view class="popup-btns">
					<button plain @click="navAgentHandle">导航至激活网点</button>
					<button plain @click="viewCouponHandle">查看卡券二维码</button>
				</view>
			</view>
			<image @click="onClose" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/96bdfc23-87c4-4802-a7fb-092558e8760e.png" mode=""></image>
		</view>
	</uni-popup>
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>

<script setup>
	import { reactive, ref, computed, getCurrentInstance, nextTick } from 'vue'
	import { onLoad, onHide, onUnload } from '@dcloudio/uni-app'
	import { $sendSmsCode, $getAwardList, $activityTakePartIn } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	import appConfig from '@/config/appConfig'
	import { checkPhone, checkBankCard } from '@/util/validate.js'
	
	// #ifdef MP-YHDD
	import activityAddress from '@/components/applyJson/activityAddressCc.json'
	// #endif
	// #ifndef MP-YHDD
	import activityAddress from '@/components/applyJson/activityAddressZz.json'
	// #endif
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const selectPopupRef = ref()
	const popupRef = ref()
	const gzLoginPopupRef = ref()	// 登录实例
	
	const vdata = reactive({
		isLogin: false,	// 用户是否登录
		activityId: '',	// 活动id
		activityDetail: {},	// 活动详情
		awardListBak: [],	// 奖品列表备份
		awardList: [],	// 展示的奖品列表
		conditioned: null,	// 选中的条件
		isOpen: false,	// 条件选择是否打开
		
		selected: 'A',	// 选择的新客OR老客	默认新客A老客B
		
		// region:  ["吉林省", "长春市"],	// 省市区选择
		
		saveObject: {
			name: '',
			phone: storageManage.userInfo().phone || '',	// 手机号回显
			code: '',
			authBankCard: ''
		},
		
		awardInfo: {},	// 预约成功后 奖品信息
		
		range: [],	// 地址信息 原始数据
		rangeIndex: [0,0,0,0],	// 选择的地址信息
		rangeValue: [],	// 对应值
	})
	
	onHide(()=>{
		// 页面隐藏时，关闭弹窗，关闭定时器 恢复按钮状态
		// onClose()
		clearInterval(smsOptions.timer)
		Object.assign(smsOptions,smsOptionsInit)
	})
	onUnload(() => {
		// 页面隐藏时，关闭弹窗，关闭定时器 恢复按钮状态
		// onClose()
		clearInterval(smsOptions.timer)
		Object.assign(smsOptions,smsOptionsInit)
	})
	
	const activityJson = ref({
		"wrapper":{
			"style":{
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/14244364-248b-4d8a-a660-d0cc515570eb.png') no-repeat left top / 100% 1112rpx,#fe5935"
			}
		},
		"content":{
			"title":{
				"text":"预 约 内 容",
				"style":{
					"width":"438rpx",
					"height":"87rpx",
					"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f84e439a-af43-4eae-9cd8-fce8f252e7c9.png') no-repeat left top / 100% 100%"
				}
			},
			"style":{
				"margin-top":"732rpx",
				"background":"#fff"
			}
		},
		"btn":{
			"style":{
				"background":"linear-gradient(to bottom, #FF9054, #FC5048)"
			}
		},
		"rule":{
			"title":{
				"text":"玩 法 介 绍",
				"style":{
					"width":"438rpx",
					"height":"87rpx",
					"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f84e439a-af43-4eae-9cd8-fce8f252e7c9.png') no-repeat left top / 100% 100%"
				}
			},
			"style":{
				"margin-top":"66rpx",
				"background":"#FFF6DB"
			}
		}
	})
	
	onLoad(async ({ activityId, activityDetail, activityChannelId })=>{
		nextTick(() => {
			selectPopupRef.value.open()
		})
		vdata.isLogin = storageManage.isLogin()
		vdata.activityId = activityId
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 活动动态参数
		activityJson.value = JSON.parse(vdata.activityDetail.activityJson || '{}')
		vdata.activityChannelId = activityChannelId
		// 标题更改为活动名称
		uni.setNavigationBarTitle({
			title: vdata.activityDetail.activityName || '预约有礼'
		})
		// 初始化地址 多选列 选项
		addressHandle()
		// 拉取奖品列表
		const { bizData } = await $getAwardList({ activityId })
		vdata.awardList =  bizData
		// 如果奖品只有一项 默认展示
		if(bizData.length === 1){
			vdata.conditioned = bizData[0]
		}
	})
	/**
	 * 切换新旧客
	 */
	const selectHandle = (selected) => {
		if(vdata.selected !== selected){
			vdata.selected = selected
		}
	}
	/**
	 * 提交选择
	 */
	const onSubmitSelect = () => {
		// 循环奖品列表
		vdata.conditioned = vdata.awardList.find(item => item.remark === vdata.selected)
		selectPopupRef.value.close()
	}
	/**
	 * 地址选择单列事件
	 */
	const columnchange = ({ detail }) => {
		addressHandle(detail)
	}
	/**
	 * 地址处理函数
	 * 接受参数
	 * 变化的列 colIndex 
	 * 根据变化的列 去取他的children 并赋值在第四列（也就是只有第三列改变的时候 才会影响到第四列的值）
	 */
	const addressHandle = (detail) => {
		if(!detail){
			vdata.range = [[{ text: activityAddress.text }],[{text: activityAddress.children[0].text}],activityAddress.children[0].children,activityAddress.children[0].children[0].children]
		}else{
			const { column,value:colIndex } = detail
			if(column === 2){
				const fourthCol = activityAddress.children[0].children[colIndex].children	// 除了要更新数据列表 还要更新下标
				vdata.range[3] = fourthCol
				vdata.rangeIndex = [0,0,colIndex,0]
			}
		}
	}
	/**
	 * 地址选择事件
	 */
	const changeHandle = ({ detail }) => {
		detail.value.forEach((item,index) => {
			vdata.rangeValue[index] = vdata.range[index][detail.value[index]].text
		})
		vdata.rangeIndex = detail.value
		vdata.saveObject.address = JSON.stringify({ value: vdata.rangeValue, index: vdata.rangeIndex })
	}
	
	const dropDownStyle = ref({
		height: 0,
	})
	/**
	 * 选择预约条件
	 */
	function openCondition(){
		vdata.isOpen = !vdata.isOpen
		// 条件面板展示与隐藏
		changeConditionStyle()
	}
	/**
	 * 条件选择
	 */
	function selectCondition(item){
		vdata.saveObject.authBankCard = ''	// 银行卡号置空
		vdata.selected = item.remark	// 记录当前选择的客户类型 新客OR老客
		vdata.conditioned = item	// 记录当前选择预约的奖品项
		vdata.isOpen = false	// 关闭弹窗
		changeConditionStyle()	// 调整样式
	}
	/**
	 * 条件面板样式调整
	 */
	function changeConditionStyle(){
		if(vdata.isOpen){	// 展开条件
			dropDownStyle.value = {
				height: (vdata.awardList.length * 94) + 'rpx',
			}
		}else{	// 关闭条件
			dropDownStyle.value = {
				height: 0,
			}
		}
	}
	// function bindRegionChange (e) {
	// 	vdata.saveObject.address = e.detail.value
	// 	vdata.region = e.detail.value
	// }
	/**
	 * 导航可核销网点
	 */
	const navAgentHandle = () => {
		const { awardId:couponId } = vdata.awardInfo
		if(couponId){
			uni.navigateTo({
				url: `/pageUser/myCoupon/mchList?couponId=${couponId}&activate=${true}`
			});
		}else{
			$infoBox.toast('奖品信息缺失，请联系管理员')
		}
	}
	/**
	 * 查看卡券信息
	 */
	const viewCouponHandle = () => {
		const { awardId:couponId, fansAwardId } = vdata.awardInfo
		if(couponId && fansAwardId){
			uni.navigateTo({
				url: `/pageUser/myCoupon/viewInfo?fansAwardId=${fansAwardId}&couponId=${couponId}`
			});
		}else{
			$infoBox.toast('奖品信息缺失，请联系管理员')
		}
	}
	/**
	 * 获取验证码
	 */
	const smsOptionsInit = {
		second: 60,
		text: '获取验证码',
		disabled: false,
		timer: null,
		background: '#F1AF5A'
	}
	const smsOptions = reactive({ ...smsOptionsInit })
	
	const sendSmsCodeFunc = async () => {
		// 校验用户是否登录
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open() // 打开授权弹框
			$infoBox.toast('请先登录后参与活动')
			return
		}
		// 校验手机号
		if(!checkPhone(vdata.saveObject.phone)){
			$infoBox.toast('请输入正确的手机号！')
			return
		}
		// 点击获验证码 调整按钮不可点击 颜色 文字 开启定时器
		Object.assign(smsOptions,{
			disabled: true,
			background: '#999',
			text: '发送中...'
		})
		try{
			// 发送短信
			await $sendSmsCode({ phone: vdata.saveObject.phone, flag: 6 })
			// 开启定时器
			smsOptions.timer = setInterval(() => {
				smsOptions.text = `重新获取(${smsOptions.second})`
				// 清除定时器 还原按钮状态
				if(smsOptions.second <= 0){
					clearInterval(smsOptions.timer)
					Object.assign(smsOptions,smsOptionsInit)
				}
				smsOptions.second -= 1
			},1000)
		}catch(e){
			//TODO handle the exception
			// 发送异常 初始化 按钮状态
			Object.assign(smsOptions,smsOptionsInit)
		}
	}
	/**
	 * 提交预约
	 */
	let isClick = false
	async function onSubmit(){
		// 校验用户是否登录
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open() // 打开授权弹框
			$infoBox.toast('请先登录后参与活动')
			return
		}
		// 校验字段
		if(!vdata.conditioned){
			$infoBox.toast('请选择预约项！')
			return
		}
		const { name, phone, code, authBankCard, address } = vdata.saveObject
		if(!name){
			$infoBox.toast('请输入姓名！')
			return
		}
		if(!checkPhone(phone)){
			$infoBox.toast('请输入正确的手机号！')
			return
		}
		if(!code){
			$infoBox.toast('请输入验证码！')
			return
		}
		if(!checkBankCard(authBankCard) && vdata.selected === 'B'){
			$infoBox.toast('请输入正确的银行卡号！')
			return
		}
		// if(!address){
		// 	$infoBox.toast('请选择地址！')
		// 	return
		// }
		// 判断用户
		if(isClick) return
		isClick = true
		uni.showLoading({
			title: '预约中...'
		})
		// 处理选中的奖品
		try{
			Object.assign(vdata.saveObject,vdata.conditioned, { isAuth: vdata.selected === 'A' ? 1 : 0 })
			const { bizData } = await $activityTakePartIn({ activityId: vdata.activityId, activityTemplateNo: vdata.activityDetail.activityTemplateNo, activityChannelId: vdata.activityChannelId, extJson: JSON.stringify(vdata.saveObject) })
			// 保存获奖信息
			vdata.awardInfo = bizData || {}
			uni.hideLoading()
			$infoBox.toast('预约成功！',{ duration: 1500 })
			setTimeout(() => {
				popupRef.value.open()
			}, 1500)
		}finally{
			isClick = false
		}
	}
	// 登录回调
	function isLoginCallback(){
		if(vdata.isLogin){	// 登录成功后 回显手机号
			vdata.saveObject.phone =storageManage.userInfo().phone
		}
	}
	/**
	 * 关闭预约成功后的弹窗
	 */
	function onClose(){
		popupRef.value.close()
	}
	/**
	 * 跳转
	 */
	function toUrl(url){
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="less" scoped>
	// 公共
	.title{
		width: 438rpx;
		height: 87rpx;
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f84e439a-af43-4eae-9cd8-fce8f252e7c9.png') no-repeat left top / 100% 100%;
		color: #fff;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		padding-top: 10rpx;
		box-sizing: border-box;
		position: absolute;
		top: -15rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.container{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/14244364-248b-4d8a-a660-d0cc515570eb.png') no-repeat left top / 100% 1112rpx,
					#fe5935;
							
		.content{
			margin: 732rpx 28rpx 28rpx;
			padding: 112rpx 40rpx 66rpx 40rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			background-color: #fff;
			position: relative;
			overflow: initial;
			box-sizing: border-box;
			.form{
				display: flex;
				flex-direction: column;
				gap: 40rpx;
				.drop-down{
					background-color: #FFFFFF;
					border-radius: 10rpx;
					font-size: 32rpx;
					font-weight: bold;
					position: relative;
					.selected{
						padding: 20rpx 26rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border: 4rpx solid #F1AF5A;
						border-bottom: none;
						border-radius: 10rpx 10rpx 0 0;
					}
					.options{
						width: 100%;
						transition: all 0.5s;
						overflow: hidden;
						background-color: #fff;
						position: absolute;
						z-index: 99;
						box-sizing: border-box;
						border-radius: 0 0 10rpx 10rpx;
						border: 4rpx solid #F1AF5A;
						border-top: none;
						.option{
							padding: 26rpx 26rpx;
							box-sizing: border-box;
							&.select{
								background-color: #fdf7ec;
							}
						}
					}
				}
				.input-field{
					background-color: #FFF6DB;
					border-radius: 8rpx;
					padding: 20rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 20rpx;
					image{
						width: 48rpx;
						height: 48rpx;
						flex-shrink: 0;
					}
					text{
						display: block;
						width: 120rpx;
						flex-shrink: 0;
					}
					input,picker{
						flex-grow: 1;
					}
					button{
						margin: initial;
						padding: 12rpx 8rpx;
						font-size: 24rpx;
						color: #fff;
						background-color: #F1AF5A;
						border-radius: 8rpx;
						border: none;
						flex-shrink: 0;
						line-height: initial;
					}
				}
			}
			.submit-btn{
				color: #fff;
				margin-top: 40rpx;
				width: 100%;
				border: none;
				background: linear-gradient(to bottom, #FF9054, #FC5048);
			}
			
			.rules{
				background-color: #FFF6DB;
				margin-top: 66rpx;
				border-radius: 16rpx;
				padding: 120rpx 32rpx 32rpx 32rpx;
				position: relative;
				view{
					font-size: 24rpx;
					color: #B7381F;
					&:nth-of-type(n + 2){
						margin-top: 12rpx;
					}
				}
			}
			
		}
	}
	.popup-container{
		.popup-content{
			width: 100vw;
			height: 1064rpx;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/4b1bb305-c5c9-44b3-98b3-8e99619b1b0f.png') no-repeat;
			background-position: 0 -80rpx;
			background-size: 100% 100%;
			overflow: hidden;
			
			.award-name{
				margin-top: 515rpx;
				text-align: center;
				color: #F12E1A;
				font-size: 36rpx;
			}
			
			.award-coupon{
				display: flex;
				justify-content: center;
				gap: 10rpx;
				align-items: center;
				margin-top: 75rpx;
				color: #fff;
				.left{
					text{
						&:nth-child(2){
							font-size: 48rpx;
							font-weight: bold;
						}
					}
				}
				.right{
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
				}
			}
			
			.popup-btns{
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 40rpx;
				margin-top: 240rpx;
				&>button{
					color: #fff;
					font-size: 32rpx;
					background: linear-gradient(to bottom, #FC868C, #FB2A1B);
					line-height: initial;
					margin: 0;
					padding: 15rpx 20rpx;
					border-radius: 45rpx;
					border: none;
				}
			}
		}
		image{
			display: block;
			width: 60rpx;
			height: 60rpx;
			margin: 0 auto;
		}
	}
	
	.select-popup-container{
		width: 620rpx;
		border-radius: 18rpx;
		background-color: #fff;
		padding: 36rpx;
		position: relative;
		
		.select-title{
			margin-top: 24rpx;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.block{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: #e5e5e5 2rpx solid;
			border-radius: 18rpx;
			padding: 36rpx;
			margin-top: 24rpx;
			.left{
				view{
					&:nth-child(1){
						font-weight: bold;
					}
					&:nth-child(2){
						margin-top: 24rpx;
						color: #999;
					}
				}
			}
			.right{
				width: 40rpx;
				height: 40rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/19ac3857-0f35-41a1-ac5c-20bc05d0d720.png') no-repeat left top / 100% 100%;
			}
		}
		.selected{
			border: 2rpx solid #f3c381;
			background-color: #fff6db;
			.left{
				view{
					&:nth-child(2){
						color: #000;
					}
				}
			}
			.right{
				background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1f99bbe7-34a5-403f-9c08-2fe9dae4adbc.png');
			}
		}
		
		button{
			margin-top: 48rpx;
			color: #fff;
			border: none;
			background: linear-gradient(to bottom, #FF9155, #FC4E47);
			border-radius: 45rpx;
		}
	}

</style>